<template>

  <div class="app-container">

    <!-- 表头条件表单 -->
    <el-form :inline="true" :model="orderQuery" class="form-inline">
      <el-form-item label="订单id">
        <el-input v-model="orderQuery.orderNo" clearable placeholder="订单id"></el-input>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="orderQuery.courseTitle" clearable placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="教师名称">
        <el-input v-model="orderQuery.teacherName" clearable placeholder="教师名称"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="orderQuery.email" clearable placeholder="用户邮箱"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="orderQuery.status" clearable placeholder="订单状态">
          <el-option label="未支付" value="0"></el-option>
          <el-option label="已支付" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectCourseOrder">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格渲染 -->
    <el-table :data="orders" border style="width: 100%">
      <el-table-column fixed prop="orderNo" label="订单id" min-width="150px"></el-table-column>
      <el-table-column fixed prop="nickname" label="用户昵称" min-width="80px"></el-table-column>
      <el-table-column fixed prop="email" label="邮箱" min-width="80px"></el-table-column>
      <el-table-column fixed label="课程封面" align="center" width="80px">
        <template slot-scope="scope">
            <img :src="scope.row.courseCover" width="40" height="40" class="head_pic"
              onerror="javascript:this.src='https://gitee.com/wuhunyu/images/raw/master/learn/images/20210114220355.JPG'"/>
        </template>
      </el-table-column>
      <el-table-column fixed prop="courseTitle" label="课程名称" min-width="100px"></el-table-column>
      <el-table-column fixed prop="teacherName" label="任课讲师"></el-table-column>
      <el-table-column fixed prop="totalFee" label="总费用/￥" sortable></el-table-column>
      <el-table-column fixed prop="scope" label="支付类型">
        <template slot-scope="scope">
            {{scope.row.payType===1?'微信':'支付宝'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="订单状态">
        <template slot-scope="scope">
          <span style='color: orange;'>{{scope.row.status===1 ? "已支付" : "未支付"}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="gmtCreate" label="创建时间" sortable></el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="block">
      <el-pagination
        @current-change="changeCurrent"
        @size-change="changeLimit"
        :current-page="orderQuery.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="orderQuery.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>

</template>

<script>

  import orderApi from '@/api/order'

  export default {
    data() {
      return {
        // 订单查询参数
        orderQuery: {
          "orderNo": "",
          "courseTitle": "",
          "teacherName": "",
          "email": "",
          "status": "",
          "current": 1,
          "limit": 10
        },
        "total": 0, // 总记录数
        // 返回结果集合
        "orders": []
      }
    },
    created() {
      this.selectCourseOrder();
    },
    methods: {
      // 查询订单信息列表
      selectCourseOrder() {
        // 去除前后空格
        orderApi.selectCourseOrder(this.orderQuery)
          // 访问成功
          .then(res => {
              // 结果集
              this.orders=res.data.orders;
              // 总记录数
              this.total=res.data.total;
            }
          ).catch(err => {
            this.$message.error(err.message);
            }
          );
      },
      // 跳转当前页
      changeCurrent(current) {
        this.orderQuery.current=current;
        this.selectCourseOrder();
      },
      // 修改当前页面最大查看记录数
      changeLimit(limit) {
        this.orderQuery.limit=limit;
        this.selectCourseOrder();
      }
    }
  }

</script>
